﻿@inject FwProject.Shop.Views.WebRootUrl WebRootUrl
@using FwProject.Com.Dto
@using FwProject.ShoppingMall.Com
@model SpceEnterDto
<style>
    .layui-table tr th, .layui-table tr td {
        text-align: center;
        padding: 9px 15px !important
    }

    .layui-form {
        padding: 15px;
    }
</style>
<form id="form0" class="layui-form layui-form-pane" action="@Url.Action("Edit",new { id=ViewBag.Id })" method="post" novalidate="novalidate" data-ajax="true" data-ajax-begin="LockAjaxCallbackBack" data-ajax-success="ReloadAjaxCallbackgoback" data-ajax-failure="FailureAjaxCallback" data-ajax-method="Post" role="form" lay-filter="form1" style="margin-bottom: 80px;">
    <div class="layui-form-item">
        @Html.LabelFor(o => o.SpceName, new { @class = "layui-form-label" })
        <div class="layui-input-block">
            @Html.TextBoxFor(o => o.SpceName, new { @class = "layui-input" })
            @Html.ValidationMessageFor(o => o.SpceName)
        </div>
    </div>
    <div class="layui-form-item">
        @Html.LabelFor(o => o.SpceNote, new { @class = "layui-form-label" })
        <div class="layui-input-block">
            @Html.TextBoxFor(o => o.SpceNote, new { @class = "layui-input" })
            @Html.ValidationMessageFor(o => o.SpceNote)
        </div>
    </div>
    <div class="layui-form-item">
        @Html.LabelFor(o => o.SpceType, new { @class = "layui-form-label" })
        <div class="layui-input-block">
            <input type="radio" name="SpceType" value="文字" title="文字" @(Model.SpceType == SpceTypeEnum.文字 ? "checked" : "")>
            <input type="radio" name="SpceType" value="图片" title="图片" @(Model.SpceType == SpceTypeEnum.图片 ? "checked" : "")>
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" class="layui-btn" id="add_formatvalue">添加规格值</button>
    </div>
    <table class="layui-table" lay-skin="line">
        <colgroup>
            <col width="200">
            <col width="300">
            <col width="150">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>规格值名称</th>
                <th></th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.ProductSpcevalues != null)
            {
                if (Model.ProductSpcevalues.Count > 0)
                {
                    for (int i = 0; i < Model.ProductSpcevalues.Count; i++)
                    {
                        <tr>
                            <td><input type="text" placeholder="请输入规格值" id="Spcevalue" name="ProductSpcevalues[@i].Spcevalue" lay-verify="required" class="layui-input" value="@Model.ProductSpcevalues[i].Spcevalue" /></td>
                            <td>
                                <input type="hidden" id="Spcevalueico" name="ProductSpcevalues[@i].Spcevalueico" value="" />
                                <div class="upImg">
                                    <button type="button" class="layui-btn uploader_img">上传图片</button>
                                    <img src="@(string.IsNullOrEmpty(Model.ProductSpcevalues[i].Spcevalueico)?"/images/默认图.png":ViewBag.ImageUrl+Url.Content(Model.ProductSpcevalues[i].Spcevalueico))" width="30" height="30" />
                                </div>
                            </td>
                            <td>@Html.HiddenFor(o => o.ProductSpcevalues[i].Id)<a class="layui-btn layui-btn-danger layui-btn-small del" href="javascript:">删除</a></td>
                        </tr>
                    }
                }
            }
        </tbody>
    </table>
</form>
<div class="layui-layer-btn layui-layer-btn-" style="padding:8px 12px;z-index:1000;position: fixed;bottom:0;left: 1px;width: 98%;height: 50px; background:rgba(230,230,230,0.8)">
    <a id="save" class="layui-layer-btn0" lay-submit="" lay-filter="saveprops">保存</a>
</div>
<script type="text/html" id="demo_formatvalue">
    <tr>
        <td><input type="text" placeholder="请输入规格值" id="Spcevalue" name="ProductSpcevalues[0].Spcevalue" lay-verify="required" class="layui-input" /></td>
        <td>
            <input type="hidden" id="Spcevalueico" name="ProductSpcevalues[0].Spcevalueico" />
            <div class="upImg">
                <button type="button" class="layui-btn uploader_img">上传图片</button>
                <img src="~/images/默认图.png" width="30" height="30" />
            </div>
        </td>
        <td><a class="layui-btn layui-btn-danger layui-btn-small del" href="javascript:">删除</a></td>
    </tr>
</script>
@section scripts{
    <script src="~/js/main.js"></script>
    <script type="text/javascript">
        var form, layer, layedit, upload;
        layui.use(['form', 'layedit', 'layer', 'upload'], function () {
            layedit = layui.layedit;
            form = layui.form;
            layer = layui.layer;
            upload = layui.upload;
            //自定义验证规则
            form.verify({
                required: function (value) {
                    if (value == "") {
                        return '必填项不能为空';
                    }
                }
            });

            layui.each($(".upImg"), function (index, elem) {//layui的坑,无法渲染所有相关的dom
                upload.render({
                    elem: elem
                    , url: '/Spce/UploadImage'
                    , done: function (res) {
                        //如果上传失败
                        if (!res.success) {
                            return layer.msg('上传失败');
                        }
                        var img = "@WebRootUrl.WebImageRootUrl()/uploads/temp/spce/";
                        //上传成功
                        $(elem).find("img").attr("src", img + res.result)
                        $(elem).parent().find("#Spcevalueico").val(res.result)
                    }
                });
            });


            form.on('radio', function (data) {
                if (data.value == "文字") {
                    $('.upImg').hide();
                } else {
                    $('.upImg').show();
                }
            });
        })

        $(document).ready(function () {
            @if(Model.SpceType== SpceTypeEnum.文字)
            {
                <text>
            $('.upImg').hide();
                 </text>
            }


        });

        function ReloadAjaxCallbackgoback(data, successInfo) {
            if (data.success) {
                parent.layer.msg('保存成功！')
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭当前iframe页面
            } else {
                layer.msg('保存失败：' + successInfo);
            }
        }

        $('#add_formatvalue').on('click', function () {
            var h = $('#demo_formatvalue').html();
            var l = $('#form0 tbody').find('tr').length;
            h = h.replace(/ProductSpcevalues\[0\]/g, "ProductSpcevalues[" + l + "]");
            var d = $(h);
            var spcetype = $("input[type=radio][name=SpceType]:checked").val();
            if (spcetype == "图片") {
                d.find(".upImg").show();
            } else {
                d.find(".upImg").hide();
            }
            $('#form0 tbody').append(d);
            var upimg = d.find(".upImg");
            upload.render({
                elem: upimg
                , url: '/Spce/UploadImage'
                , done: function (res) {
                    //如果上传失败
                    if (!res.success) {
                        return layer.msg('上传失败');
                    }
                    var img = "/uploads/temp/spce/";
                    //上传成功
                    $(upimg).find("img").attr("src", img + res.result)
                    $(upimg).parent().find("#Spcevalueico").val(res.result)
                }
            });
            form.render(null, 'form1');
        });

        $('#save').on('click', function () {
            $('#form0').submit();
        });

        $('#form0 table').on('click', '.del', function () {
            $(this).parent().parent().remove();
            var trs = $('#form0 tbody').find('tr');
            if (trs.length > 0) {
                for (var i = 0; i < trs.length; i++) {
                    $(trs[i]).find('#Spcevalue').attr("name", "ProductSpcevalues[" + i + "].Spcevalue");
                    $(trs[i]).find('#Spcevalueico').attr("name", "ProductSpcevalues[" + i + "].Spcevalueico");
                }
            }
        });
    </script>
}

